<template>
    <div class="content">
        <Breadcrumb><span style="color: #107ce5;">最新资料</span></Breadcrumb>
        <div class="accessRank">
            <el-row>
                <el-col>
                    <ul v-if="dataList.length > 0">
                        <li v-for="item in dataList" :key="item.id">
                            <RouterLink target="_blank"
                                :to="{ path: '/viewItemFile', query: { id: item.meansUploadAtt[0].attachId } }">
                            <el-row>
                                <el-col :span="22" :xs="18" :sm="18" class="ellipsis">
                                    <span>{{ item.meansName }}</span>
                                </el-col>
                                <el-col :span="2" :xs="6" :sm="6" style="text-align: center;color: #999">{{ item.releaseDate
                                }}</el-col>
                            </el-row>
                            </RouterLink>
                        </li>
                    </ul>
                    <el-empty description="暂无数据" v-else />
                    <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
                        v-model:limit="queryParams.rows" @pagination="getAllList" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup name="latestCase">
import { onMounted } from "vue";
import Breadcrumb from "../breadcrumb/index.vue";
import { getProfileListMore } from '@/api/index/accessRanking.js'
import {useWebsocket} from "@/utils/socket"
const dataList = ref([]);
const total = ref(9);
const queryParams = ref({
    page: 1,
    rows: 10,
})
function getAllList() {
    getProfileListMore({ ...queryParams.value }).then(res => {
        dataList.value = res.data.rows ? res.data.rows : [];
        total.value = res.data.total;
    })
}
// WebSocket
const ws = useWebsocket()
ws.onmessage = (e) => {
    if(JSON.parse(e.data).moduleType=='infDelivery'){
        getProfileListMore({ ...queryParams.value }).then(res => {
            dataList.value = res.data.rows ? res.data.rows : [];
            total.value = res.data.total;
        })
    }
  };

//页面卸载，关闭socket
onUnmounted(() => {
  ws.close();
});
onMounted(() => {
    getAllList();
})
</script>

<style lang="scss" scoped>
.content {
    width: 1280px;
    margin: 20px auto 0;
    background-color: #fff;

    .accessRank {
        width: 1280px;
        min-height: calc(100vh - 240px);
        margin: 0 auto;
        margin-top: 10px;
        padding:0 40px;
        background-color: #fff;
        ul{
            padding: 0px 100px;
        }

        li {
            color: #333;
            margin: 30px 0;
            font-size: 16px;
        }

        ul li::marker {
            font-size: 20px;
        }

        li:hover {
            color: #107ce5;
            cursor: pointer;
        }

        .ellipsis {
            display: inline-block;
            // width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }
    }
}
</style>